/*
 * @Author: yangzonglong
 * @Date: 2021-07-20 10:28:39
 * @version: v1.0.0
 * @Descripttion: mobile input
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-31 09:51:58
 * @Auditor:
 */
import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { InputItem } from 'antd-mobile';
import RequiredMark from './RequiredMark';

const MobileInput = (props, ref) => {
  const { formItemProps, inputProps, disabled, initialValue } = props;

  const [value, setValue] = useState(null);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  useImperativeHandle(ref, () => ({
    getData: () => value,
  }));

  return (
    <InputItem
      disabled={disabled || inputProps?.disabled || !!inputProps?.bindName}
      placeholder={inputProps?.placeholder}
      clear={false}
      value={value}
      onChange={setValue}
    >
      {
        <span>
          {formItemProps?.required && <RequiredMark />}
          {formItemProps?.label}
        </span>
      }
    </InputItem>
  );
};

export default forwardRef(MobileInput);
